<template>
  <div class="tab-detail">
    <Form
      ref="form"
      :rules="formValidate"
      :label-width="90"
      :model="form"
      style="margin: 50px;"
    >
      <div
        style="width:100%;margin-bottom:10px;height:230px;border: 1px dashed #dcdee2;"
      >
        <img
          style="max-width:100%;max-height:230px"
          :src="
            form.image
              ? form.image
              : 'https://img0.baidu.com/it/u=699973849,3290692557&fm=26&fmt=auto'
          "
        />
      </div>
      <FormItem label="名称" prop="name">
        <Input v-model="form.name" readonly />
      </FormItem>
      <FormItem label="温度(℃)" prop="temperature">
        <Input
          type="number"
          v-model.number="form.temperature"
          style="width:100%"
          :max="200"
          :min="0"
          readonly
        />
      </FormItem>
      <FormItem label="湿度(%)" prop="humidity">
        <Input
          type="number"
          v-model.number="form.humidity"
          style="width:100%"
          :max="100"
          :min="0"
          readonly
        />
      </FormItem>
      <FormItem label="大气压力(bar)" prop="pressure">
        <Input
          type="number"
          v-model.number="form.pressure"
          style="width:100%"
          :max="100"
          :min="0"
          readonly
        />
      </FormItem>
      <FormItem label="空气密度(kg/m^3)" prop="airDensity">
        <Input
          type="number"
          v-model.number="form.airDensity"
          style="width:100%"
          :max="2"
          :min="0"
          readonly
        />
      </FormItem>
    </Form>
  </div>
</template>
<script>
import { atmosphereApi } from "@/api/atmosphere";
export default {
  name: "AtmosphereListDetail",
  components: {},
  props: {
    //是否为更新表单
    isUpdate: {
      type: Boolean,
      default: true
    },
    //更新的表单数据对象
    updateData: {
      type: Object
    }
  },
  data() {
    return {
      //表单数据
      form: {
        //名称
        name: null,
        //温度(℃)
        temperature: null,
        //湿度(%)
        humidity: null,
        //大气压力(bar)
        pressure: null,
        //空气密度(kg/m^3)
        airDensity: null,
        //创建人
        createUser: null,
        //更新人
        updateUser: null
      },
      //表单验证
      formValidate: {
        //名称
        name: [{ required: true, message: "请输入名称", trigger: "change" }],
        //温度(℃)
        temperature: [
          {
            type: "number",
            required: true,
            message: "请输入温度(℃)",
            trigger: "change"
          }
        ],
        //湿度(%)
        humidity: [
          {
            type: "number",
            required: true,
            message: "请输入湿度(%)",
            trigger: "change"
          }
        ],
        //大气压力(bar)
        pressure: [
          {
            type: "number",
            required: true,
            message: "请输入大气压力(bar)",
            trigger: "change"
          }
        ],
        //空气密度(kg/m^3)
        airDensity: [
          {
            type: "number",
            required: true,
            message: "请输入空气密度(kg/m^3)",
            trigger: "change"
          }
        ],
        //图片
        image: [{ required: true, message: "请上传图片", trigger: "change" }]
      }
    };
  },
  watch: {
    updateData: function(newValue, oldValue) {
      this.$refs["form"].resetFields();
      if (this.isUpdate) {
        for (let k in this.form) {
          this.$set(this.form, k, newValue[k]);
        }
        this.$set(this.form, "id", newValue["id"]);
      }
    },
    isUpdate: function(newValue, oldValue) {
      if (!newValue) {
        this.resetForm();
        this.$refs["form"].resetFields();
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      this.resetForm();
      this.$emit("on-form-close");
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.isUpdate) {
            this.update();
          } else {
            this.add();
          }
        } else {
          this.$Message.error("参数验证错误，请仔细填写表单数据!");
        }
      });
    },
    resetForm() {
      this.form = {
        //id
        id: null,
        //名称
        name: null,
        //温度(℃)
        temperature: null,
        //湿度(%)
        humidity: null,
        //大气压力(bar)
        pressure: null,
        //空气密度(kg/m^3)
        airDensity: null,
        //创建人
        createUser: null,
        //更新人
        updateUser: null
      };
      this.$refs["form"].resetFields();
    },
    async add() {
      this.$Spin.show();
      let res = await atmosphereApi.addAtmosphere(this.form);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.resetForm();
      this.$emit("on-form-close");
    },
    async update() {
      this.$Spin.show();
      let res = await atmosphereApi.updateAtmosphere(this.form);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.resetForm();
      this.$emit("on-form-close");
    }
  }
};
</script>
<style>
.tab-detail {
  margin-bottom: 50px;
}
.tab-detail input {
  background-color: #f4f4f4 !important;
}
</style>
